<template>
	<view class="container">
		<!-- header -->
		<view class="header">
			<view class="header_nav">
				<view @click="goBack"></view>
				积分钱包
			</view>
			<!-- 积分 -->
			<view class="jifen">
				<image class="jifen_bg" src="https://community.chuangxiangdianli.com/images/me/ji_bg.png" mode=""></image>
				<view class="jifen_content">
					<view class="jifen_top">
						<image src="https://community.chuangxiangdianli.com/images/me/jifen.png" mode=""></image>
						积分
					</view>
					<view class="jifen_num">{{ total_integral }}</view>
					<view class="jifen_keyong">可用积分</view>
					<view class="jifen_leiji">累计积分获取: {{ total_integral }}积分</view>
				</view>
			</view>
		</view>
		<!-- 积分获取/扣除 -->
		<view class="getOrdel">
			<view @click="changeNav(1)">
				<view :class="navIndex === 1 ? 'active' : ''">积分获取</view>
				<view v-if="navIndex === 1"></view>
			</view>
			<view @click="changeNav(2)">
				<view :class="navIndex === 2 ? 'active' : ''">积分扣除</view>
				<view v-if="navIndex === 2"></view>
			</view>
		</view>
		<!--  现有积分 -->
		<view class="integral">
			<view>积分：{{ current_total_integral }}</view>
			<view class="month" @click="show = true">
				{{ params.year }}.{{ params.month }}
				<view class="icon"><view></view></view>
				<u-picker
				 v-model="show"
				 mode="time"
				 @confirm="changeTime"
				 :params="params"
				 ></u-picker>
			</view>
		</view>
		<!-- 积分明细 -->
		<scroll-view class="integralList" scroll-y>
			<view class="defaultStyle" v-if="showflag">
				<Default
					:type="type"
					:showflag="showflag"
				></Default>
			</view>
			<view class="item" v-if="!showflag" v-for="( item, index ) in integralData" @click="goDetail(item)">
				<view class="left">
					<view class="liyou">
						<image v-if="navIndex == 1" src="https://community.chuangxiangdianli.com/images/me/huoqu.png" mode=""></image>
						<image v-if="navIndex == 2" src="https://community.chuangxiangdianli.com/images/me/kouchu.png" mode=""></image>
						{{ item.reward }}
					</view>
					<view class="shijian">{{ timeStr(item.created_at) }}</view>
				</view>
				<view class="right" :style="navIndex ==  1 ? '' : 'color: #F94441;'">
					{{ navIndex ==  1 ? '+' : '-' }}{{ item.integral }}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	
	export default{
		data() {
			return{
				type: 4,
				showflag: false,
				show: false,
				current_total_integral: 0, // 当前月份
				total_integral: 0, // 总计
				navIndex: 1, // 积分获取： 1， 积分扣除： 2。
				integralData: [], // 积分列表数据
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: false, 
				}, // 日期选择器
				
			}
		},
		onLoad() {
			//  获取当前年份/月份
			let date = new Date()
			// 获取年份
			this.params.year = date.getFullYear()
			//  获取月份
			this.params.month = date.getMonth() + 1
			
		},
		onShow() {
			this.getIntegral()
		},
		methods: {
			//  获取积分数据
			getIntegral() {
				var that = this
				this.$mrequest({
					url: 'Mini/integral/getList',
					method: 'POST',
					data: {
						type: that.navIndex,
						year: that.params.year,
						month: that.params.month
					},
					callBack: function callBack (res) {
						console.log('积分数据成功', res)
						if (res.status) {
							that.integralData = res.data.list
							that.current_total_integral = res.data.current_total_integral
							that.total_integral = res.data.total_integral
							if (res.data.list.length > 0) {
								that.showflag = false
							} else {
								that.showflag = true
							}
						}
					},
					fail: function fail (res) {
						console.log('积分数据失败', res)
					}
				})
			},
			//  改变navIndex
			changeNav(num) {
				if (this.navIndex === num) return
				this.navIndex = num
				this.getIntegral()
			},
			//  跳转详情
			goDetail(item) {
				uni.navigateTo({
					url: '/me/integral/integralDetail?item=' + JSON.stringify(item)
				})
			},
			// 返回上一级
			goBack() {
				uni.navigateBack()
			},
			//  日期选择 点击确定
			changeTime(params) {
				this.params.year = params.year
				this.params.month = params.month
				console.log('日期数据', this.params)
				this.getIntegral()
			},
			// 转化时间戳
			timeStr(str) {
				let timeStr = ''
				let timer = new Date(str)
				let year = timer.getFullYear()
				let month = timer.getMonth() + 1 < 10 ? '0' + timer.getMonth() + 1 : timer.getMonth() + 1
				let day = timer.getDate() < 10 ? '0' + timer.getDate() : timer.getDate()
				// let hour = timer.getHours() < 10 ? '0' + timer.getHours() : timer.getHours()
				// let mins = timer.getMinutes() < 10 ? '0' + timer.getMinutes() : timer.getMinutes()
				timeStr = year + '-' + month +  '-' + day
				 // + ' ' +  hour + ':' +  mins
				// console.log(timeStr)
				return timeStr
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		height: calc(370rpx + var(--status-bar-height));
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
		border-radius: 0px 0px 20rpx 20rpx;
		.header_nav{
			position: relative;
			height: 40rpx;
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			line-height: 40rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 20rpx;
			&>view{
				position: absolute;
				left: 32rpx;
				top: 0;
				bottom: 0;
				margin: auto;
				height: 28rpx;
				width: 28rpx;
				border-left: 6rpx solid #FFFFFF;
				border-bottom: 6rpx solid #FFFFFF;
				transform: rotate(45deg);
			}
		}
		.jifen{
			position: relative;
			height: 372rpx;
			margin: 47rpx 0rpx 0;
			.jifen_bg{
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				z-index: 1;
			}
			.jifen_content{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 10;
				overflow: hidden;
				.jifen_top{
					height: 49rpx;
					width: 100%;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-top: 67rpx;
					margin-left: 28rpx;
					&>image{
						display: inline-block;
						width: 49rpx;
						height: 49rpx;
						margin-left: 31rpx;
					}
				}
				.jifen_num{
					height: 50rpx;
					font-size: 50rpx;
					font-family: zihun64hao-mengquruantangti;
					font-weight: 400;
					color: #FF9C00;
					text-align: center;
					margin-top: 9rpx;
					margin-bottom: 23rpx;
				}
				.jifen_keyong{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					text-align: center;
				}
				.jifen_leiji{
					height: 28rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-left: 62rpx;
					margin-top: 46rpx;
				}
			}
			
		}
	}
	.getOrdel{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		height: 53rpx;
		margin-top: 100rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		&>view{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 63rpx;
			&>view:nth-child(2){
				width: 134rpx;
				height: 6rpx;
				background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
				box-shadow: 0px 5rpx 12rpx 1rpx rgba(68, 198, 170, 0.3);
				border-radius: 3rpx;
			}
			.active{
				color: #34C39E;
			}
		}
	}
	.integral{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 52rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	.integralList{
		height: calc(100vh - 700rpx);
		width: 100%;
		.item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 150rpx;
			margin: 0 30rpx;
			margin-top: 20rpx;
			padding: 19rpx 18rpx 34rpx;
			box-sizing: border-box;
			background-color: #F7F6F9;
			border-radius: 10rpx;
			.left{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.liyou{
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					height: 49rpx;
					
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					&>image{
						display: block;
						height: 49rpx;
						width: 49rpx;
						margin-right: 26rpx;
					}
				}
				.shijian{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
			.right{
				height: 100%;
				line-height: 97rpx;
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #34C39E;
			}
		}
	}
	.month{
		// width: 200rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100%;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1B3A5A;
		&>.icon{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 30rpx;
			width: 30rpx;
			border-radius: 50%;
			border: 1px solid rgba(27, 58, 90, 1);
			margin-left: 10rpx;
			&>view{
				width: 12rpx;
				height:12rpx;
				border-right: 1rpx solid rgba(27, 58, 90, 1);
				border-bottom: 1rpx solid rgba(27, 58, 90, 1);
				transform: translateY(-2rpx) rotate(45deg);
			}
		}
	}
</style>
